<template>
  <div>
    <van-nav-bar
      title="个人信息"
      left-arrow
      @click-left="$router.push('/user')"
    />
    <van-cell title="头像" is-link>
      <van-image class="avatar" fit="cover" round :src="details.photo" />
    </van-cell>
    <van-cell @click="userName" title="昵称" is-link :value="details.name" />
    <van-cell
      @click="userSex"
      title="性别"
      is-link
      :value="details.gender ? '女' : '男'"
    />
    <van-cell
      @click="userTime"
      title="生日"
      is-link
      :value="details.birthday"
    />
    <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
      <van-nav-bar
        class="user-nav-bar"
        title="更新昵称"
        left-text="取消"
        right-text="保存"
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="7"
        show-word-limit
      />
    </van-popup>

    <van-popup v-model="isShow" position="bottom" :style="{ height: '46%' }">
      <van-picker
        title="更新性别"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>

    <van-popup v-model="flag" position="bottom" :style="{ height: '46%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirm"
        @cancel="cancel"
      />
    </van-popup>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getUserProfile, updateUserName } from '@/api/user'
import { Toast } from 'vant'
export default {
  name: 'detailsPage',
  data() {
    return {
      details: {},
      show: false,
      message: '',
      isShow: false,
      columns: ['男', '女'],
      flag: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      currentDate: ''
    }
  },
  created() {
    this.getUserProfile()
  },
  methods: {
    async getUserProfile() {
      const res = await getUserProfile()
      this.details = res.data.data
    },
    onClickLeft() {
      this.show = false
    },
    userName() {
      this.show = true
      this.message = this.details.name
    },
    async onClickRight() {
      await updateUserName({ name: this.message })
      this.show = false
      this.getUserProfile()
      Toast.success('更新成功')
    },
    userSex() {
      this.isShow = true
    },
    async onConfirm(value, index) {
      await updateUserName({ gender: index })
      this.isShow = false
      this.getUserProfile()
      Toast.success('更新成功')
    },
    onCancel() {
      this.isShow = false
    },
    userTime() {
      this.flag = true
      this.currentDate = new Date(this.details.birthday)
    },
    async confirm(value) {
      await updateUserName({ birthday: dayjs(value).format('YYYY-MM-DD') })
      this.flag = false
      this.getUserProfile()
      Toast.success('更新成功')
    },
    cancel() {
      this.flag = false
    }
  }
}
</script>

<style scoped lang="less">
.avatar {
  width: 30px;
  height: 30px;
}
.user-nav-bar {
  background-color: #fff;
  ::v-deep .van-nav-bar__title {
    color: #000 !important;
  }
}
</style>
